<template>
  <div style="display: flex">
    <div v-for="(item, index) of list" :key="index" class="list-item">
      <!-- <dv-digital-flop
        :config="item.number"
        class="number"
        :style="{ color: item.color }"
      ></dv-digital-flop> -->
      <div class="number" :style="{ color: item.color }">{{ item.number }}</div>
      <div class="artfont">{{ item.art }}</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // config: {
      //   lineWidth: 30,
      //   activeRadius: '80%',
      //   radius: '75%',
      //   activeTimeGap: 2000
      // },
      list: [
        {
          // number: { number: [199], content: '{nt}' },
          number: 199,
          color: "#F5DF4D",
          art: "本周签约数量",
        },
        {
          // number: { number: [299], content: '{nt}' },
          number: 299,
          color: "#12C4FF",
          art: "上周签约数量",
        },
        {
          // number: { number: [1999], content: '{nt}' },
          number: 1999,
          color: "#34DC78",
          art: "本月签约数量",
        },
        {
          // number: { number: [2999], content: '{nt}' },
          number: 2999,
          color: "#FF8E00",
          art: "上月签约数量",
        },
        {
          // number: { number: [19999], content: '{nt}' },
          number: 19999,
          color: "#F74EFF ",
          art: "本年签约数量",
        },
      ],
    };
  },
  // mounted () {
  //   this.changeTiming()
  // },
  // methods: {
  //   changeTiming () {
  //     setInterval(() => {
  //       this.changeNumber()
  //     }, 3000)
  //   },
  //   changeNumber () {
  //     this.list.forEach((item,index) => {
  //       item.number.number[0] += +index
  //       item.number = { ...item.number }
  //     })
  //   }
  // }
};
</script>
<style lang="scss" scoped>
.number {
  font-family: PingFangSC-Medium;
  font-size: 36px;
  text-align: center;
}
.artfont {
  font-family: PingFang-SC-Regular;
  margin-top: 4px;
  font-size: 16px;
  color: #ffffff;
  text-align: center;
}
.list-item {
  width: 180px;
  height: 80px;
  margin: 26px 2px;
  position: relative;
  transform-style: preserve-3d;
  transition: 1s;
}
</style>
